import React, { useState } from "react";
import { Meta, StoryFn, StoryObj } from '@storybook/react';
import { action } from "@storybook/addon-actions";
import { fn } from "@storybook/test";
import Input, { IInputProps } from "./input";

const styles: React.CSSProperties = {
    textAlign: "center"
}
// 返回含有设定样式的节点
const centerDecorator = (story: any) => <div style={styles}>{story()}</div>
const ControlInput = () => {
    const [value, setValue] = useState<string>("1212");
    return <Input value={value} onChange={(e) => { setValue(e.target.value) }} />
}
// 默认导出
export default {
    title: 'Input', // 设置故事的标题
    component: Input, // 指定组件
    decorators: [centerDecorator],
    tags: ['autodocs'],
    argTypes: {
        size: {
            options: ["lg", "sm"],
            control: {
                type: "select",
            },
        },
        disabled: {
            options: [true, false],
            control: {
                type: "select",
            },
        },
    },
    args: { onChange: fn() },
} as Meta;

const primaryTemplate: StoryFn = (args) => <>
    <Input {...args} onClick={action('primary-clicked')} />
    <ControlInput/>
</>;
// 带icon
const iconTemplate: StoryFn = (args) => <Input placeholder="input with icon" icon="search" style={{ width: "300px" }} {...args} />;
const pandTemplate: StoryFn = (args) => <Input defaultValue="prepend text" prepend="https://" append=".com" style={{ width: "300px" }} {...args} />;
export const WithPrimary = primaryTemplate.bind({});
WithPrimary.args = {
    children: 'Click me'
};
export const WithIcon = iconTemplate.bind({});
WithIcon.args = {
    children: 'Click me'
};
export const WithPand = pandTemplate.bind({});
WithPand.args = {
    children: 'Click me'
};
